<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>图片开关灯效果</title>
    <style>
        .light-box {
            text-align: center;
			
        }
        /* 灯泡容器样式 */
        .bulb {
            width: 200px;
            height: 200px;
            margin: 20px;
            background-size: contain;
            background-repeat: no-repeat;
			
        }
        /* 默认关闭状态（off.jpg） */
        .bulb.off {
            background-image: url(img/off.jpg); 
        }
        /* 开启状态（on.jpg） */
        .bulb.on {
            background-image: url(img/on.jpg);  
        }

        /* 开关按钮样式 */
        .switch-btn {
            padding: 12px 24px;
            font-size: 18px;
            border: none;
            border-radius: 25px;
            background: #4CAF50;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
        }
    </style>
</head>
<body class="dark-mode">
    <div class="light-box">
        <div class="bulb off" id="bulb"></div>
        <button class="switch-btn" onclick="toggleLight()">开灯</button>
    </div>

    <script>
        function toggleLight() {
            if (bulb.classList.contains('off')) {
                // 开灯状态
                bulb.classList.remove('off');
                bulb.classList.add('on');
                body.classList.remove('dark-mode');
                btn.textContent = '关灯';
            } else {
                // 关灯状态
                bulb.classList.remove('on');
                bulb.classList.add('off');
                body.classList.add('dark-mode');
                btn.textContent = '开灯';
            }
        }
    </script>
</body>
</html>